<!-- 文件列表 -->
<template>
	<view>
		<view class="top-back">
			<view class="top-name">文件列表</view>
			<view class="top-num">({{count}})</view>
			<view class="top-right top-right-left" :class="sortSelect==''?'':'top-right-select'" @click="sortAction">
				<view v-if="sortSelect == ''" class="top-contnet">排序</view>
				<view v-if="sortSelect != ''" class="top-contnet top-content-select">{{sortSelect}}</view>
				<image v-if="sortSelect == ''" class="top-icon" src="../../../static/arrow_down.png"></image>
				<image v-if="sortSelect != ''" class="top-icon" src="../../../static/arrow_down_select.png"></image>

			</view>
			<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
				<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
				<image v-if="!screenSelect" class="top-icon" src="../../../static/select.png"></image>
				<image v-if="screenSelect" class="top-icon" src="../../../static/select_select.png"></image>
			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" stripe emptyText=" ">
				<uni-tr>
					<uni-th align="center">文件名称</uni-th>
					<uni-th align="center" width="110">上传者</uni-th>
					<uni-th align="center" width="200">上传时间</uni-th>
					<uni-th align="center" width="80">关联案件</uni-th>
					<uni-th align="center" width="100">操作</uni-th>

				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="left">
						<view style="display: flex;align-items: center;">
							<image v-if="item.attachFile.fileSuffix == 'pdf' || item.attachFile.fileSuffix=='pdfx'"
								class="content-img" mode="aspectFill" src="../../../static/phone/case-detail-pdf.png">
							</image>
							<image
								v-else-if="item.attachFile.fileSuffix == 'doc' || item.attachFile.fileSuffix == 'docx'"
								class="content-img" mode="aspectFill" src="../../../static/phone/case-detail-word.png">
							</image>
							<image
								v-else-if="item.attachFile.fileSuffix == 'xls' || item.attachFile.fileSuffix == 'xlsx'"
								class="content-img" mode="aspectFill" src="../../../static/phone/case-detail-excel.png">
							</image>
							<image
								v-else-if="item.attachFile.fileSuffix == 'jpg' || item.attachFile.fileSuffix == 'png'"
								class="content-img" mode="aspectFill" src="../../../static/phone/jpg.png"></image>
							<image
								v-else-if="item.attachFile.fileSuffix == 'ppt' || item.attachFile.fileSuffix == 'pptx'"
								class="content-img" mode="aspectFill" src="../../../static/phone/case-detail-ppt.png">
							</image>
							<image v-else='item.attachFile.fileSuffix' class="content-img" mode="aspectFill"
								src="../../../static/phone/case-detail-ppt.png"></image>
							<view class="cell-name"><text selectable="true">{{ item.attachFile.name }}</text></view>
						</view>
					</uni-td>
					<uni-td align="center">
						<view class="nameTagBack">
							{{ item.account.realName }}
							<view class="nameTag" v-if="item.userType.desc == '律师'">律师</view>
						</view>
					</uni-td>
					<uni-td align="center">{{ item.editTime?item.editTime:item.createTime }}</uni-td>
					<uni-td align="center">
						<view class="item-blue-text" @click="clickShowAction(item)">查看</view>
					</uni-td>
					<uni-td align="center">
						<view class="item-blue-text" @click="downloadAction(item)">下载</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="search-back" v-if="tableData.length == 0">
				<image class="search-image" :src="pc_search_nodata"></image>
				<view class="search-noresult">没有查询到结果</view>
			</view>
			<view style="margin-top: 10px;margin-bottom: 10px;" v-if="tableData.length > 0">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="count"
					@change="change" />
			</view>
		</view>

		<distribute v-if="showDistribute" @distributeClose='clickDistributeClose'></distribute>
		<popSelect v-model="showSortSelect" :triangle=true :select="sortSelect" :popData="sortSelectdata"
			@tapPopup="tapPopup" :x="x" :y="y" placement="top-start" dynamic>
		</popSelect>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="screenFormData" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.name" placeholder="文件名称" />
					</uni-forms-item>
					<uni-forms-item>
						<selectxy :zindex=399 ref="selectxy" :value="multipleArr" placeholder="文件类型"
							:options="rangeList" @change="multipleChange">
						</selectxy>
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.createAt" placeholder="上传者" />
					</uni-forms-item>
					<uni-forms-item>
						<selectxy :zindex=299 ref="statusSelectxy" :value="statusMultipleArr" placeholder="上传者角色"
							:options="statusRangeList" @change="statusMultipleChange">
						</selectxy>
					</uni-forms-item>
					<uni-forms-item>
						<view style="display: flex;justify-content: space-between;">
							<view class="date-select-back" @click="openDatetimePicker(0)">
								<image class="dateimage" src="../../../static/pc_date.png"></image>
								<view v-if="screenFormData.updatestart" class="date-select-time">
									{{screenFormData.updatestart}}
								</view>
								<view v-else class="date-select-plac">上传时间起</view>
							</view>
							<view class="date-select-back" @click="openDatetimePicker(1)">
								<image class="dateimage" src="../../../static/pc_date.png"></image>
								<view v-if="screenFormData.updateend" class="date-select-time">
									{{screenFormData.updateend}}
								</view>
								<view v-else class="date-select-plac">上传时间止</view>
							</view>
						</view>
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
			<dateTimeSelect :type='date' ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2030" />
		</popSelect>

	</view>
</template>

<script>
	import statusTag from "@/packageC/PhonePC/components/tags/tags.vue"
	import popSelect from '@/components/popSelect/popSelect.vue'
	import uniselect from "@/packageC/PhonePC/components/uni-data-select/uni-data-select.vue"
	import dateTimeSelect from "@/components/dateTimeSelect/dateTimeSelect.vue"
	import selectxy from "@/components/select-cy/select-cy.vue"
	import check from "@/packageC/PhonePC/caseManage/check.vue"
	import distribute from "@/packageC/PhonePC/caseManage/caseDistribute.vue"
	let app = ''

	export default {
		components: {
			statusTag,
			popSelect,
			uniselect,
			dateTimeSelect,
			selectxy,
			check,
			distribute
		},
		data() {
			return {
				role: '', //当前登录角色
				roleUrl: '',
				count: 0, // 数据总量
				pageSize: 10, // 每页数据量
				pageCurrent: 1, // 当前页
				tableData: [],
				showSortSelect: false,
				sortSelectdata: [{
					'title': '按上传时间倒序',
				}, {
					'title': '按上传时间顺序',
				}, ],
				x: 0,
				y: 0,
				showDialog: false,
				sortSelect: "",
				screenx: 0,
				screeny: 0,
				showScreen: false,
				screenFormData: {
					name: '',
					createAt: "",
					type: '',
					userType: '',
					updatestart: '',
					updateend: '',
				},
				screenSelect: false,
				dateSelectIndex: 0,
				multipleArr: [],
				selectArr: [],
				rangeList: [],

				statusRangeList: [], //上传者角色
				statusMultipleArr: [],
				statusSelectArr: [],

				itemID: '',
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png'
			}
		},
		mounted() {
			var _this = this;
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			this.requestData();
			this.requestDicData();
			this.requestStatusDicData();
		},
		methods: {
			// 分页触发
			change(e) {
				this.pageCurrent = e.current
				this.requestData()			
			},
			//文件类型
			async requestDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/attach_file_type",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.rangeList = arr;
					console.log(_this.rangeList)
				}
			},
			//上传者角色
			async requestStatusDicData() {
				let _this = this

				const res = await this.$myRequest({
					url: "/comm/dict/list/$Type$user",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.statusRangeList = arr;
					console.log(_this.statusRangeList)
				}
			},

			//网络请求示例
			async requestData() {
				let _this = this
				var url = `/${_this.roleUrl}/caseAttach/list`;
				let parmas = {
					size: _this.pageSize,
					page: _this.pageCurrent,
				};
				if (this.sortSelect) {
					if (this.sortSelect == '按上传时间倒序') {
						this.$set(parmas, 'desc', 'createTime')
					}
					if (this.sortSelect == '按上传时间顺序') {
						this.$set(parmas, 'asc', 'createTime')
					}
				}

				if (this.screenSelect) {
					if (_this.screenFormData.name) {
						this.$set(parmas, 'attachFileQuery', {
							'name': 'lk:' + _this.screenFormData.name
						})
					}
					if (_this.screenFormData.createAt) {
						this.$set(parmas, 'accountQuery', {
							'realName': 'lk:' + _this.screenFormData.createAt
						})
					}
					//文件类型
					if (_this.selectArr.length) {
						var dicStr = '';
						for (var i = 0; i < _this.selectArr.length; i++) {
							if (i == 0) {
								dicStr = _this.selectArr[i].value
							} else {
								dicStr += "," + _this.selectArr[i].value
							}
						}
						this.$set(parmas, 'type', 'in:' + dicStr)
					}
					//上传者角色
					if (_this.statusSelectArr.length) {
						var dicStr = '';
						for (var i = 0; i < _this.statusSelectArr.length; i++) {
							if (i == 0) {
								dicStr = _this.statusSelectArr[i].value
							} else {
								dicStr += "," + _this.statusSelectArr[i].value
							}
						}
						this.$set(parmas, 'userType', 'in:' + dicStr)
					}

					if (_this.screenFormData.updatestart && !_this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'ge:' + _this.screenFormData.updatestart)
					}
					if (!_this.screenFormData.updatestart && _this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'le:' + _this.screenFormData.updateend)
					}
					if (_this.screenFormData.updatestart && _this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'bt:' + _this.screenFormData.updatestart + ',' + _this
							.screenFormData.updateend)
					}
				}

				const res = await this.$myRequest({
					url: url,
					method: 'POST', //默认是GET
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.count = res.data.data.count;
					_this.tableData = res.data.data.list
				}
			},
			//下载
			downloadAction(item) {

				var wxflie = uni.getFileSystemManager();
				var _this = this;
				var url = getApp().globalData.baseUrl + `/admin/clash/export`;
				if (item.type == '图片文件') {
					console.log('图片')
					uni.getSetting({
						success: (res) => {
							//如果没有相册权限
							if (!res.authSetting["scope.writePhotosAlbum"]) {
								//向用户发起授权请求
								uni.authorize({
									scope: "scope.writePhotosAlbum",
									success: () => {
										//授权成功保存图片到系统相册
										uni.getImageInfo({
											src: url,
											success(image) {
												uni.saveImageToPhotosAlbum({
													filePath: image.path,
													success(res) {
														uni.hideLoading();
														uni.showToast({
															title: '保存成功'
														});

													},
													fail(err) {
														uni.hideLoading();
														uni.showToast({
															title: err
																.errMsg
														})
													},
													complete() {
														uni.hideLoading()
													}
												})
											},
											fail(err) {
												uni.hideLoading();
												uni.showToast({
													title: err
														.errMsg
												})
											}
										})
									},
									//授权失败
									fail: () => {
										uni.hideLoading();
										uni.showModal({
											title: "您已拒绝获取相册权限",
											content: "是否进入权限管理，调整授权？",
											success: (res) => {
												if (res.confirm) {
													//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
													uni.openSetting({
														success: (
															res
														) => {
															console
																.log(
																	res
																	.authSetting
																);
														},
													});
												} else if (res.cancel) {
													uni.showToast({
														title: "已取消！",
														icon: "none"
													});
												}
											},
										});
									},
								});
							} else {
								uni.getImageInfo({
									src: url,
									success: function(image) {
										//如果已有相册权限，直接保存图片到系统相册
										uni.saveImageToPhotosAlbum({
											filePath: image.path,
											success: (res) => {
												uni.hideLoading();
												uni.showToast({
													title: "保存成功！",
												});
												that.isNewGift = false;
											},
											fail: (res) => {
												uni.hideLoading();
												console.log(res.errMsg);
												uni.showToast({
													title: res.errMsg,
													icon: "none"
												});
											},
											//无论成功失败都走的回调
											complete: (res) => {
												uni.hideLoading();
												uni.showToast({
													title: res.errMsg,
													icon: "none"
												});
											},
										});
									}
								})
							}
						},
						fail: (res) => {
							uni.hideLoading();
							console.log(res.errMsg);
							uni.showToast({
								title: res.errMsg,
								icon: "none"
							});
						},
					});
					// uni.downloadFile({
					// 	url: url,
					// 	header: {
					// 		"Content-Type": "image/png",
					// 		"Authorization": "Basic ZG90Z286ZG90Z28=",
					// 		"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
					// 	},
					// 	success: function(res) {
					// 		console.log(res)
					// 		//如果已有相册权限，直接保存图片到系统相册
					// 		uni.saveImageToPhotosAlbum({
					// 			filePath: res.tempFilePath,
					// 			success: (res) => {
					// 				uni.hideLoading();
					// 				uni.showToast({
					// 					title: "保存成功！",
					// 				});

					// 			},
					// 			fail: (res) => {
					// 				uni.hideLoading();
					// 				console.log(res.errMsg);
					// 				uni.showToast({
					// 					title: res.errMsg,
					// 					icon: "none"
					// 				});
					// 			},
					// 			//无论成功失败都走的回调
					// 			complete: (res) => {
					// 				uni.hideLoading();
					// 				uni.showToast({
					// 					title: res.errMsg,
					// 					icon: "none"
					// 				});
					// 			},
					// 		});
					// 	}
					// })
				} else { //非图片文件
					uni.downloadFile({
						url: url,
						header: {
							"Content-Type": "application/x-xls",
							"Authorization": "Basic ZG90Z286ZG90Z28=",
							"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
						},
						success: function(res) {
							wx.hideLoading();
							console.log(res)
							wxflie.saveFile({
								tempFilePath: res.tempFilePath,
								filePath: `${wx.env.USER_DATA_PATH}/` + item.attachFile.name,
								success: function(res1) {
									console.log(res1)
									wx.saveImageToPhotosAlbum({
											filePath: res1.savedFilePath,
										}).then(save => {
											console.log('保存成功', save)
											wx.showToast({
												title: '保存成功',
												icon: 'success',
												duration: 2000
											})
										})
										.catch(error => {
											console.log('保存失败', error)
										})
								}
							})
						},
						fail: function(err) {
							wx.hideLoading();
							console.log('下载失败：', err);
						},
					});
				}
			},
			async updataRequest() {
				this.requestData()
			},

			clickShowAction(item) {
				this.$emit('clickCaselist', item)
			},

			//排序
			sortAction(e) {
				this.x = e.touches[0].clientX
				this.y = e.touches[0].clientY
				this.showSortSelect = !this.showSortSelect
				console.log(this.x, this.y, this.value)
			},

			tapPopup(e) {
				console.log(e)
				this.sortSelect = e.title;
				this.requestData();
			},

			//筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},
			//文件类型
			multipleChange(item, value) {
				this.selectArr = item;
				this.multipleArr = value;
			},

			//上传者角色	
			statusMultipleChange(item, value) {
				this.statusSelectArr = item;
				this.statusMultipleArr = value;
			},

			//类型选择
			typeChange(e) {
				console.log(e)
			},

			// 日期选择打开picker
			openDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.myPicker.show();
			},

			// 日期选择关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			//日期选择
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				var time = `${e.year}-${e.month}-${e.day} `;
				if (this.dateSelectIndex == 0) {
					this.screenFormData.updatestart = time;

				} else if (this.dateSelectIndex == 1) {
					this.screenFormData.updateend = time;
				}
			},
			//筛选重置
			selectReset() {
				this.screenFormData = {
						name: '',
						createAt: "",
						type: '',
						userType: '',
						updatestart: '',
						updateend: ''
					},
					this.$refs.selectxy.handleAllRemove();
				this.$refs.statusSelectxy.handleAllRemove();
				this.screenSelect = false;
				this.requestData();
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen;
				this.requestData()
			},
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-content-select {
		color: #2DA9C5;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.content-img {
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;
		margin-right: 5px;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.date-select-back {
		width: 130px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.dateimage {
		width: 16px;
		height: 16px;
		margin-left: 10px;
		margin-right: 3px;
	}

	.date-select-plac {
		font-size: 12px;
		color: #999999;
	}

	.date-select-time {
		font-size: 12px;
		color: #333333;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.cell-name {
		width: 100%;
		display: inline-block;
		height: auto;
		word-break: break-all;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	.nameTag {
		font-size: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		background-color: #2DA9C5;
		border-radius: 4px;
		width: 30px;
		height: 15px;
		margin-left: 3px;
	}

	.nameTagBack {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
